<template>
    <div id="content">
        <div id="ThingJS-banner-top"></div>
        <div id="ThingJS-banner-left"></div>
        <div id="div3d"></div>
        <div class="div2d" id="div2d"></div>
        <div id="widget_root" style="position: absolute; top: 0px; z-index: 10"></div>
    </div>
</template>

<script setup>
    import {defineAsyncComponent, onBeforeUnmount, onMounted, reactive} from "vue";
  let building = null;
  let campus = null;
  let app = null;
  onBeforeUnmount(() => {
      app = null;
      building = null;
      campus = null;
  });

  // 发送消息
  function callFuncInMain() {
      let message = {
          'funcName': 33, // 所要调用父页面里的函数名
          'param': 44
      }
      // 向父窗体(用户主页面)发送消息
      // 第一个参数是具体的信息内容，
      // 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
      window.parent.postMessage(message, '*');
  }

  onMounted(() => {
      app = new THING.App({
          url: "https://www.thingjs.com/api/scene/db0df07bbd1c14e3df799b8f",
          compatibleOptions: {rendering: true}, // 开启兼容1.0渲染的模式
          skyBox: 'Dark',
      });

      app.on('load', function (ev) {
          console.log("加载成功。。。")
          callFuncInMain();
          app.level.change(ev.campus);
          campus = app.query(".Campus")[0];
          building = app.query(".Building")[0];
          //关闭，进到室内自动切换天空盒
          app.level.options['autoChangeBackground'] = false;
          setEnterFly();
          mousemove();

      })

     // 引用效果模板组件脚本
     //  THING.Utils.dynamicLoad(
     //    [
     //      "/resource/changfang1/effectTheme/EffectThemeControl.min.js",
     //      "/resource/changfang1/effectTheme/frame.js",
     //    ],
     //    function () {
     //      app.on("load", function (ev) {
     //        app.level.change(ev.campus);
     //        //关闭，进到室内自动切换天空盒
     //        app.level.options["autoChangeBackground"] = false;
     //        //初始化
     //        var control = new THING.EffectThemeControl();
     //        app.addControl(control, "效果模板控制器");
     //        //获取模板控制器
     //        var ctrl = app.getControl("效果模板控制器");
     //        //注册模板,data是模板数据。如果是本地效果模板包，必须填第三个参数，该参数是模板包相对于该片代码的路径
     //        ctrl.registerTheme(
     //          "default_parkbusiness",
     //          data,
     //          "https://campus.thingjs.com/builder/api-campus/scene/template/file/28183"
     //        );
     //        //获取园区
     //        campus = app.query(".Campus")[0];
     //        //应用效果模板
     //        campus.applyTheme("default_parkbusiness");
     //        ctrl.applyEffectTheme("default_parkbusiness", campus);
     //        ctrl.applyThemeEnvironment("default_parkbusiness", campus);
     //
     //        building = app.query(".Building")[0];
     //        setEnterFly();
     //      });
     //    }
     //  );
  });

  // 修改默认的层级飞行响应
  function setEnterFly() {
    // 进入建筑摊开楼层
    app.on(
            THING.EventType.EnterLevel,
            ".Building",
            function (ev) {
              var previous = ev.previous; // 上一层级
              console.log('---1--', ev.current)
              ev.current.expandFloors({
                time: 1000,
                length: 6,
                horzMode: true,
                complete: function () {
                  console.log("ExpandFloor complete ");
                },
              });
            },
            "customEnterBuildingOperations"
    );

    //  退出建筑关闭摊开的楼层
    app.on(
            THING.EventType.LeaveLevel,
            ".Building",
            function (ev) {
              var current = ev.current; // 当前层级
              ev.object.unexpandFloors({
                time: 500,
                complete: function () {
                  console.log("Unexpand complete ");
                },
              });
            },
            "customLeaveBuildingOperations"
    );
  }

  // 鼠标滑入事件
  function mousemove() {
    // 选择室外所有物体 + 所有建筑
    var objs = app.query('.Building').add(campus.things);
    initThingJsTip("鼠标滑入物体时，物体颜色变红");
    var floor = app.query('.Floor')[0]; // 获取楼层对象
    var things = floor.things; // 楼层内Thing类模型
    things.forEach(function (item) {
      item.on('mouseleave', function (ev) {
        ev.object.style.color = null;
        reset();
      });
      item.on('mouseenter', function (ev) {
        // ev.object.style.color = '#ff0000';
        createMarker();
        useMarker(ev.object)
      });
    })


  }

  //创建物体顶牌
  function createMarker() {
    var html =
            `<div id="board" class="marker" style="position: absolute;display:none;">
          <div class="text" style="color: #FF0000;font-size: 12px;text-shadow: white  0px 2px, white  2px 0px, white  -2px 0px, white  0px -2px, white  -1.4px -1.4px, white  1.4px 1.4px, white  1.4px -1.4px, white  -1.4px 1.4px;margin-bottom: 5px;">
          </div>
          <div class="picture" style="height: 30px;width: 30px;margin: auto;">
              <img src="https://www.thingjs.com/guide/examples/images/navigation/pointer.png" style="height: 100%;width: 100%;">
          </div>
      </div>`;
    $('#div3d').append($(html));
  }

  function useMarker(obj) {
    var item = app.query('#' + obj.id)[0];
    app.create({
      type: 'UIAnchor',
      parent: item,
      element: createElement(item),
      localPosition: [0, 2, 0],
      //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
      pivot: [0.5, 1]
    });
    $('#' + item.id + " .text").text("name：" + item.name);
  }

  // 生成一个新面板
  function createElement(item) {
    var srcElem = document.getElementById('board');
    var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    newElem.setAttribute("id", item.id);
    app.domElement.insertBefore(newElem, srcElem);
    return newElem;
  }

  //重置
  function reset() {
    $(".marker").remove();  // 移除标注
  }


</script>

<style lang="scss" scoped>
    #div2d {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
    }

    #div3d {

    }

    .dv-loading .loading-tip {
        color: #fff;
    }
</style>
